<template>
    <div class="showBox" >
      <div class="no-print" style="margin-left: 50px;">
         <p>1.下方的打印内容，请确认后再打印，如有出入请联系管理员，事后再从票据补开打印；</p>
         <p>2.点击打印进入打印对话框，选择打印机和布局，并打印；</p>
         <p>3.打印完成后，务必点击下方确定按钮。</p>
          <a-button v-print="'#printContent'" ghost type="primary"
           style="    text-align: right;float: right;  margin-top: -60px;">打印</a-button>
      </div>
     
      <div class="img-box_img2" :style="{'height': printCon.areaHeight+'px'}" >

        <template>
          <table ref="print" id="printContent">
            <template v-for="(item1, index1) in printCon.rowHeight">
              <tr :style="{'height': item1+'px'}" >
                <template v-for="(item2, index2) in printCon.colWidth">

                  <template v-if=" rowColIndex[ (index1) +'_'+(index2) ] > index2">

                    <template v-if=" index1 == 0 ">
                     <td :style="{'width': item2 +'px'}" :colspan="rowColIndex[ (index1) +'_'+(index2) ] - index2 +1 " >
                        <span v-if="null != rowColTxtVal[ (index1) +'_'+(index2) ] ">{{ printBillData[rowColTxtVal[ (index1) +'_'+(index2) ]] }}  </span>
                        <span v-if="null != rowColTxt[ (index1) +'_'+(index2) ] " >{{ rowColTxt[ (index1) +'_'+(index2) ] }}  </span>
                      </td>
                    </template>
                    <template  v-else>
                     <td :style="{'text-align':  (index1 >3 && index1<9) ? 'right' : 'left'  }" :colspan="rowColIndex[ (index1) +'_'+(index2) ] - index2 +1 " >
                        <span v-if="null != rowColTxtVal[ (index1) +'_'+(index2) ] "
                         :style="{'text-align': 'left','display': 'block','width': rowColMwidth[(index1) +'_'+(index2) ] +'px' }">
                          {{ printBillData[rowColTxtVal[ (index1) +'_'+(index2) ]] }}  </span>
                        <span v-if="null != rowColTxt[ (index1) +'_'+(index2) ] "
                         :style="{'text-align': 'right','display': 'block','width': rowColMwidth[(index1) +'_'+(index2) ] +'px' }">
                          {{ rowColTxt[ (index1) +'_'+(index2) ] }}  </span>
                      </td>
                    </template>
                  </template>
                  <template v-if=" rowColIndex[ (index1) +'_'+(index2) ] == -1 ">

                  </template>
                  <template v-else-if=" rowColIndex[ (index1) +'_'+(index2) ] == index2">
                     <td :style="{'width': item2 +'px'}" >
                        <span v-if="null != rowColTxtVal[ (index1) +'_'+(index2) ] "
                          :style="{'text-align': 'left','display': 'block','width': rowColMwidth[(index1) +'_'+(index2) ] +'px' }">
                          {{ printBillData[rowColTxtVal[ (index1) +'_'+(index2) ]] }}  
                        </span>
                        <span v-if="null != rowColTxt[ (index1) +'_'+(index2) ] "
                          :style="{'text-align': 'right','display': 'block','width': rowColMwidth[(index1) +'_'+(index2) ] +'px' }">
                         {{ rowColTxt[ (index1) +'_'+(index2) ] }}  
                        </span>
                      </td>
                  </template>
                  <template v-else>

                  </template>

                </template>
              </tr>
            </template>
          </table>

          <!-- PdfPTable table = new PdfPTable(colWidth.length); // 建立一个14列的空白表格对象
		table.setSpacingBefore(0f); // 设置表格上面空白宽度
		table.setWidthPercentage(colWidth,pdfPage);//设置列宽 -->

        </template>

      </div>
    </div>

  <!--</page-layout>-->
</template>
<script>
  import { getAction,postAction} from '@/api/manage'
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ATextarea from 'ant-design-vue/es/input/TextArea'

  export default {
    components: {
      ATextarea,
      ARow,
      ACol,
    },
    name: 'Printgzsld',
    props: ["printBillData"],
    data(){
      return {
        columns: [{
        }
        ],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        rowHeight: 30,
        previewImage: '',
        printCon:{},
        rowColIndex:{},
        rowColMwidth:{},
        rowColTxtVal:{},
        rowColTxt:{},
        currentCol:[],
        isColOpen:false,
        url:{
          loadPringConfig:"/chg/chgFees/getPrintConfig",
          loadRegisterFiles:"/sps/register/getRegisterFilesConfig",
        }
      }
    },
    created() {
      this.loadData();
       console.log("printBillData-form",this.printBillData)
    },
    methods: {
      loadData(){
        var params = {
          dbCode: "fee_print_bill_sj_"
        }
        getAction(this.url.loadPringConfig, params).then((res) => {
          if (res.success) {
              this.printCon=res.result;
              this.rowColIndex=res.result.rowColIndex;
              this.rowColMwidth=res.result.rowColMwidth;
              this.rowColTxt=res.result.rowColTxt;
              this.rowColTxtVal=res.result.rowColTxtVal;

            /**
              * printConfigObj.put("rowsObj",rowsObj);
              * printConfigObj.put("rowHeight",rowHeight); float[] rowHeight
              * printConfigObj.put("colWidth",colWidth);	float[] colWidth
              * printConfigObj.put("merges",mergesObj); 合并 row_col 1_2
              * printConfigObj.put("rowColIndex",rowColObject);
              * printConfigObj.put("rowColTxt",rowColTxtObj);
              * printConfigObj.put("rowColTxtVal",rowColTxtValObj);
              * printConfigObj.put("areaWidth",areaWidth);
              * printConfigObj.put("areaHeight",areaHeight);
              * printConfigObj.put("printConfig",printConfig);
              */
          }else{
              this.$message.warning(res.message)
          }
        }).finally(() => {

        })

      },
      getDate(){
        // 当前时间

      },
      handleCancel () {
        this.previewVisible = false
      },

    }
  }
</script>
<style scoped>
  /*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
  * {
    color: #000000!important;
    -webkit-tap-highlight-color: #000000!important;
  }
  /*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

  .explain{
    text-align: left;
    margin-left: 50px;
    color:#000000!important;
  }
  .explain .ant-input,.sign .ant-input{
    font-weight:bolder;
    text-align:center;
    border-left-width:0px!important;
    border-top-width:0px!important;
    border-right-width:0px!important;
  }
  .explain div{
    margin-bottom: 10px;
  }
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  .showBox{   
    width:100%;
    height:450px;
  }
  .img-box_img2 {
    margin:0 auto;
    position: relative;
    width:1100px;
    height:700px;
    /* background-Size:contain; */
    /* background-Position:center center; */
    /* background: url('~@assets/feeBill.png') no-repeat center/contain;  */
  }
</style>